<!--
 * @Description: 
 * @Author: 
 * @Date: 2024-11-01 16:25:04
 * @LastEditors: 史迪仔
 * @LastEditTime: 2024-11-06 11:37:02
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>史迪仔牛逼哄哄</title>
    <link rel = "icon" href="..\day46\img\屏幕截图 2024-11-01 114445.png"
    tupe="image/png">
    <style>
        a{
            text-decoration: none;
        }
    #app {
        background-image: url("..\\day46\\img\\屏幕截图 2024-11-01 164926.png"); 
        margin:0;
        padding: 0;
        background-repeat: no-repeat; 
        background-size: cover; 
        background-position: center ;
        height: 100vh; /*让 #app 高度为视窗高度 */
        width: 100vw;   /*让 #app 宽度为视窗宽度 */
    }
    form {
        text-align: center; /* 将表单内的文本和输入框水平居中对齐 */
        border-radius: 10px; /* 为表单的边框添加圆角，使其看起来更柔和 */
        padding: 50px; /* 在表单内部四周添加50像素的内边距，使内容与边框之间有一定的空间 */
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        width: 80%; /* 设置表单宽度 */
        max-width: 800px; /* 最大宽度 */
        font-size: 20px; /* 设置表单内所有文本的字体大小 */
        margin-left: 400px;
        margin-bottom: 100px;
    }
    .form-group {
        color: black;
        margin-bottom: 25px; /* 设置间距 */
    }
    </style>
</head>
<body>
    <div id="app">
        <div style="color: yellow;font-size: 50px;float: left;">
            新用户注册
        </div>
        <div style="color: blue;float: right;font-size: 30px">
            <p>已有账号？<a href="file:///D:/Users/86156/Desktop/Html/day46/%E7%99%BB%E5%BD%95.html">立即登录</a></p>
        </div>
        <div style="color: rgba(255, 255, 255, 0.8);font-size: 50px;">
            <br>
            USER REGISTER
        </div>
    <form action="">
        <div class="form-group">
            用户名   <input type="text"name="username"placeholder="请输入用户名">
        </div> 
        <div class="form-group">
            密码   <input type ="password" name="password"placeholder="请输入正确密码">
        </div>
        <div class="form-group">
            Email   <input type ="text" name="Email"placeholder="请输入正确的邮箱">
        </div>
        <div class="form-group">
           姓名   <input type="text"name="name"placeholder="请输入真实姓名">
        </div> 
        <div class="form-group">
            手机号   <input type="text"name="phone"placeholder="请输入手机号">
        </div> 
        <div class="form-group">
            性别
            男<input type ="radio" name="gender" value="男">
            女<input type ="radio" name="gender" value="女">
        </div>
        <div class="form-group">
            出生日期
            <input type="date"name="birth" >
        </div>
        <div class="form-group">
            验证码：
            <input type="text"placeholder="请输入验证码">
            <img src="..\day46\img\verify_code.jpg">
        </div>
        <div>
            <input type ="submit"value="注册">
        </div>
    </div>
    </form>
</body>
</html>